<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" :size="600" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:0 20px 20px 20px">
				<div class="image-gallery">
					<el-timeline>
						<el-timeline-item v-for="(section, index) in sections" :key="index" :timestamp="section.date"
							placement="top">
							<el-row :gutter="3">
								<el-col v-for="(img, imgIndex) in section.images" :key="imgIndex" :xs="8" :sm="8"
									:md="8">
									<el-card @click="lookup(img)" shadow="hover" class="image-card">
										<el-image :src="'https://b.yayi360.com/static/patient/img/cbct.jpg'"
											fit="cover"></el-image>
										<div class="image-info">
											<span v-if="img.type">{{ img.type }}</span>
											<span class="time">{{ img.time }}</span>
										</div>
									</el-card>
								</el-col>
							</el-row>
						</el-timeline-item>
					</el-timeline>
				</div>
			</el-main>
		</el-container>
	</el-drawer>
</template>

<script>
	export default {
		data() {
			return {
				mode: "show",
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},
				loading: false,
				visible: false,
				sections: [

				]
			};
		},
		methods: {
			lookup(img) {

				if (top.window.api == undefined) {
					return this.$alert("请在客户端里打开", "提示", {
						type: 'error'
					})
				}

				this.$showLoading();
				top.window.api.command({
					cmd: "x2dcm",
					args: [
						'-path',
						`${img.path}\\ImageFile_${img.id}_(.*).tif`.replace(/\\/g, "/")
					],
					timeout: 60 * 5
				}).then(res => {
					console.error("res", res)
				}).catch(err => {
					this.$alert(err, "提示", {
						type: 'error'
					})
				}).finally(() => {
					setTimeout(() => {
						this.$hideLoading()
					}, 3000);
				})
			},

			getPreviewList(images) {
				return images.map(img => img.url);
			},
			open(mode = 'show') {
				this.mode = mode;
				if (this.mode == 'show') {
					this.loading = false;
				}
				this.visible = true;
				return this
			},
			//表单注入数据
			setData(data) {
				this.loading = false
				const params = {
					id: data.id
				}
				setTimeout(async () => {
					var res = await this.$API.bole.ct.list.get(params)
					this.loading = false
					this.sections = res.data
				}, 0)
			}
		}
	};
</script>

<style scoped>
	.image-card {
		cursor: pointer;
	}

	.el-image {
		width: 100%;
		height: 125px;
		border-radius: 4px;
	}

	.image-info {
		padding-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
	}

	.time {
		color: #999;
	}
</style>
